<template>
  <div class="flex-row justify-center page space-x-76">
    <div class="flex-row items-center self-start group space-x-10">
      <img
        class="image_2"
        src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/645618e45a7e3f0310b4bf5d/646759b654fe00001163217a/16844965703753383461.png"
      />
      <div class="flex-col items-start space-y-42">
        <span class="text_2">问卷E</span>
        <span class="text_4">SurveyE</span>
      </div>
    </div>
    <div class="flex-col self-center space-y-49">
      <img
        class="self-center image"
        src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/645618e45a7e3f0310b4bf5d/646759b654fe00001163217a/16844965703737918963.png"
      />
      <div class="flex-col items-center space-y-24">
        <span class="text">账号密码登录</span>
        <div class="section"></div>
      </div>
      <div class="flex-col">
        <el-form ref="formRef" :model="form" :rules="rules">
          <el-form-item prop = "username">
            <el-input
              placeholder="请输入您的账号"
              class="inputValue_RYH"
              v-model="form.username"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop = "password">
            <el-input
              placeholder="请输入您的密码"
              v-model="form.password" 
              show-password
              :border="false"
              class="inputValue_RYH1">
            </el-input>
          </el-form-item>
        </el-form>
        <span class="self-end font_1 text_6">忘记密码？</span>
        <el-button class="text-wrapper button_i6j" color="#0054fe" type="primary" @click ="handleLogin">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {login} from '@/api/login'
// import {useStore} from 'vuex'
// const store = useStore()
const form = ref({
  username: '',
  password: ''
})

const rules = ref({
  username:[
    {
      required: true, 
      message: '请输入账号', 
      trigger: 'blur'
    }
  ],
  password:[
    {
      required: true, 
      message: '请输入密码', 
      trigger: 'blur'
    }
  ]
})

const formRef = ref(null)
const handleLogin = ()=>{
  formRef.value.validate(async(valid) => {
          if (valid) {
            alert('submit!');
            await login(form.value)
            // store.dispatch('app/login',form.value)
          } else {
            console.log('error submit!!');
            return false;
          }
        });
}

</script>

<style scoped lang="css">

    /************************************************************
  ** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
  ** 否则页面将无法正常显示                                  **
  ************************************************************/

  html {
    font-size: 16px;
  }

  body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
      'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
  }

  body * {
    box-sizing: border-box;
    flex-shrink: 0;
  }

  #app {
    width: 100vw;
    height: 100vh;
  }

  .flex-row {
    display: flex;
    flex-direction: row;
  }

  .flex-col {
    display: flex;
    flex-direction: column;
  }

  .justify-start {
    justify-content: flex-start;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-around {
    justify-content: space-around;
  }

  .justify-evenly {
    justify-content: space-evenly;
  }

  .items-start {
    align-items: flex-start;
  }

  .items-end {
    align-items: flex-end;
  }

  .items-center {
    align-items: center;
  }

  .items-baseline {
    align-items: baseline;
  }

  .items-stretch {
    align-items: stretch;
  }

  .self-start {
    align-self: flex-start;
  }

  .self-end {
    align-self: flex-end;
  }

  .self-center {
    align-self: center;
  }

  .self-baseline {
    align-self: baseline;
  }

  .self-stretch {
    align-self: stretch;
  }

  .flex-1 {
    flex: 1 1 0%;
  }

  .flex-auto {
    flex: 1 1 auto;
  }

  .grow {
    flex-grow: 1;
  }

  .grow-0 {
    flex-grow: 0;
  }

  .shrink {
    flex-shrink: 1;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .relative {
    position: relative;
  }

  .cf_sidebar_wrapper {
    display: flex;
    flex-direction: row;
    height: 100%;
  }

  .cf_sidebar_content_wrapper {
    flex: 1;
  }

  .van-cell * {
    flex-shrink: unset;
  }

  .page {
    /* padding: 19.88rem 24.13rem; */
    margin-top: 200px;
    background-color: #ffffff;
    overflow: hidden;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
  }
  .space-x-76 > *:not(:first-child) {
    margin-left: 4.75rem;
  }
  .group {
    margin-top: 2.81rem;
  }
  .space-x-10 > *:not(:first-child) {
    margin-left: 0.63rem;
  }
  .image_2 {
    width: 23.5rem;
    height: 24.88rem;
  }
  .space-y-42 > *:not(:first-child) {
    margin-top: 2.63rem;
  }
  .text_2 {
    margin-left: 0.25rem;
    color: #000000;
    font-size: 4.38rem;
    font-family: AlimamaShuHeiTi;
    line-height: 3.97rem;
  }
  .text_4 {
    color: #000000;
    font-size: 3.13rem;
    font-family: AlimamaShuHeiTi;
    line-height: 2.94rem;
  }
  .space-y-49 > *:not(:first-child) {
    margin-top: 3.06rem;
  }
  .image {
    width: 11rem;
    height: 2.94rem;
  }
  .space-y-24 > *:not(:first-child) {
    margin-top: 1.5rem;
  }
  .text {
    color: #0054fe;
    font-size: 1.13rem;
    font-family: AlimamaShuHeiTi;
    line-height: 1.03rem;
  }
  .section {
    background-color: #0054fe;
    width: 6.88rem;
    height: 0.19rem;
  }
  .section_3 {
    margin-top: 1.19rem;
  }
  .font_1 {
    font-size: 0.88rem;
    font-family: AlimamaShuHeiTi;
    line-height: 0.81rem;
    color: #cccccc;
  }
  .text_6 {
    margin-top: 1.5rem;
    color: #666666;
    text-decoration: underline;
  }
  .text-wrapper {
    margin-top: 2.63rem;
  }
  .inputValue_RYH {
    background-color: #ffffff;
    /* border: solid 0.063rem #dedede; */
    border-radius: 0.31rem;
    padding: 1rem 0.81rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 24.06rem;
  }
  .inputValue_RYH1{
    /* margin-top: 20px; */
    background-color: #ffffff;
    /* border: solid 0.063rem #dedede; */
    border-radius: 0.31rem;
    padding: 1rem 0.81rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 24.06rem;
  }
  .button_i6j {
    padding: 1rem 0px;
    border-radius: 0.31rem;
    background-color: #0054fe;
    margin-top: 2.63rem;
    width: 24.06rem;
    border: unset !important;
    height: 3.13rem;
    color: #ffffff !important;
    font-family: AlimamaShuHeiTi;
    font-size: 1rem;
    line-height: 0.91rem;
  }
  :deep(.inputValue_RYH) .van-field__left-icon {
    display: flex;
    align-items: center;
  }
  :deep(.inputValue_RYH) .van-field__right-icon {
    line-height: 1;
    padding: 0;
    margin: 0;
  }
  :deep(.inputValue_RYH) .van-cell::after {
    left: 0;
    right: 0;
  }
  :deep(.inputValue_RYH) .van-field__value {
    font-family: AlimamaShuHeiTi;
    font-size: 0.88rem;
    line-height: 0.81rem;
    margin-left: 0.88rem;
  }
  /* :deep(.button_i6j) .van-button__text { */
    /* max-width: 100%; */
    /* overflow: hidden; */
    /* white-space: nowrap; */
    /* text-overflow: ellipsis; */
    /* display: flex; */
    /* flex-direction: column; */
    /* justify-content: flex-start; */
    /* align-items: center; */
  /* } */
</style>